<template>
	<view class="scan-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="扫码登录"></uni-navbar></view>

		<view class="container">
			<view class="info-box" v-if="userInfo.Authorization">
				<view class="info-sub">
					<image :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image>
					{{ userInfo.sysUser.userName }} ({{ userInfo.sysUser.phone }})
				</view>
				<view class="info-title">确认登录</view>
				<view class="info-text">请不要扫描来源不明的二维码</view>
			</view>

			<view class="fiexd-btm">
				<u-button class="form-btn" type="error" shape="circle" @click="qrcodeComplete">确认登录</u-button>
				<u-button class="form-btn" type="default" shape="circle" @click="qrcodeCancel">取消登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			qrId: '',
			userId: ''
		};
	},
	onLoad(option) {
		if (option && option.qrId) {
			this.qrId = option.qrId;
		}
		this.loadLogin();

		this.qrcodeScan();
	},
	onUnload() {
		let data = {
			step: '5',
			qrId: this.qrId,
			userId: this.userId
		};
		this.$request('/loginQr', data, {
			load: true
		});
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.userId = this.userInfo.sysUser.id;
			} else {
				this.$logout();
			}
		},
		qrcodeScan() {
			let data = {
				step: '6',
				qrId: this.qrId,
				userId: this.userId
			};
			this.$request('/loginQr', data, {
				load: true
			}).then(res => {
				console.log(res);
			});
		},
		qrcodeComplete(e) {
			let data = {
				step: '4',
				qrId: this.qrId,
				userId: this.userId
			};
			this.$request('/loginQr', data, {
				load: true
			}).then(res => {
				this.$msg(res.msg);
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 500);
			});
		},
		qrcodeCancel(e) {
			let data = {
				step: '5',
				qrId: this.qrId,
				userId: this.userId
			};
			this.$request('/loginQr', data, {
				load: true
			}).then(res => {
				this.$msg(res.msg);
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 500);
			});
		}
	}
};
</script>

<style lang="scss">
.scan-view {
	min-height: 100vh;
	background-color: #fff;
}

.info-box {
	position: relative;
	margin: 30rpx 0 50rpx;
	padding: 30rpx;
	text-align: center;
	background: none;

	.info-sub {
		margin-bottom: 100rpx;
		font-size: 17px;
		line-height: 48rpx;

		image {
			display: block;
			margin: 0 auto 18rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			background-color: #f7f7f7;
		}
	}

	.info-text {
		margin: 0;
		font-size: 15px;
		color: #666;
		line-height: 42rpx;
	}

	.info-title {
		margin: 0;
		font-size: 24px;
		font-weight: bold;
		color: #333;
		line-height: 66rpx;
	}
}

.fiexd-btm {
	position: static;

	button {
		margin-top: 40rpx;
		width: 600rpx;
	}
}
</style>
